<template>
    <app-layout>
        <view class="no-content" v-if="!list.length">
            <view>你还没有进行中的砍价</view>
            <view>去会场逛逛！</view>
        </view>
        <view class="order-list">
            <block v-for="(v,k) in list" :key="k">
                <view @click="navGoods(v)" class="bargain-list dir-left-nowrap" :class="v.reset_time ? 'long':''">
                    <view class="box-grow-0">
                        <image :src="v.cover_pic"></image>
                    </view>

                    <view class="box-grow-1 dir-top-nowrap bargain-right">
                        <view class="box-grow-0 bargain-name t-omit-two">{{v.goods_name}}</view>
                        <view class="box-grow-0 attr">{{v.select_attr_group_text}}</view>
                        <block v-if="v.reset_time">
                            <view class="box-grow-1 bargain-time dir-left-nowrap cross-center">
                                <view>距结束</view>
                                <view class="info">{{v.times.hour}}</view>
                                <view>:</view>
                                <view class="info">{{v.times.minute}}</view>
                                <view>:</view>
                                <view class="info">{{v.times.second}}</view>
                            </view>
                            <view class="box-grow-0 dir-left-nowrap cross-center">
                                <view class="box-grow-1 dir-top-nowrap">
                                    <view class='min-price'>
                                        <block v-if="v.now_price == v.min_price">已砍至最低</block>
                                        <block v-else>离最低￥{{v.min_price}}</block>
                                    </view>
                                    <view class='price'>
                                        <text class="price-float">{{v.now_price != v.min_price ? '还差':''}}￥</text>
                                        <text class="price-int">{{v.priceList.priceInt}}</text>
                                        <text class="price-float">{{v.priceList.priceFloat}}</text>
                                    </view>
                                </view>
                                <view class="box-grow-0">
                                    <app-button v-if="v.now_price == v.min_price" @click.native.stop="submit(v)" height="48"
                                                width="120" color="#FFFFFF" font-size="24" :theme="getTheme" roundSize="4rpx" padding="0">立即购买
                                    </app-button>
                                    <app-button v-else @click.native.stop="goto(v)" height="48" roundSize="4rpx" padding="0"
                                                width="120" color="#FFFFFF" font-size="24" :theme="getTheme">继续砍价
                                    </app-button>
                                </view>
                            </view>
                        </block>
                        <block v-else>
                            <view class="box-grow-1 dir-top-nowrap main-between">
                                <view class="box-grow-1 bargain-content">{{v.content}}</view>
                                <view class="box-grow-0 price">{{v.status_content}}
                                    <text v-if="v.status == 1" class="price-float">￥</text>
                                    <text v-if="v.status == 1" class="price-int">{{v.priceList.priceInt}}</text>
                                    <text v-if="v.status == 1" class="price-float">{{v.priceList.priceFloat}}</text>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </block>
        </view>
        <common-buttom :theme="getTheme" status="prize"></common-buttom>
    </app-layout>
</template>

<script>
    import commonButtom from "../common-buttom.vue";
    import {mapGetters} from "vuex";

    export default {
        name: "order-list",
        components: {commonButtom},
        data() {
            let integral;
            return {
                integral,
                list: [],
                args: false,
                page: 1,
                load: false,
            }
        },
        computed: {
            ...mapGetters('mallConfig',{
                getTheme: 'getTheme',
            }),
        },
        onReachBottom: function () {
            const self = this;
            if (self.args || self.load)
                return;
            self.load = true;
            let page = self.page + 1;
            self.$request({
                url: self.$api.bargain.list,
                data: {
                    page: page,
                }
            }).then(info => {
                if (info.code === 0) {
                    [self.page, self.args] = [page, info.data.list.length === 0];
                    self.getIntegral(self.list.concat(info.data.list));
                }
                self.load = false;
            });
        },

        onShow: function () {
            const self = this;
            self.$showLoading();
            self.$request({
                url: self.$api.bargain.list,
            }).then(info => {
                self.$hideLoading();
                if (info.code === 0) {
                    self.getIntegral(info.data.list);
                }
                self.args = false;
                self.page = 1;
            }).catch(e => {
                self.$hideLoading();
            })
        },
        onUnload() {
            clearInterval(this.integral);
        },
        methods: {
            navGoods(v) {
                uni.navigateTo({url: '/plugins/bargain/goods/goods?goods_id=' + v.goods_id});
            },
            goto(v) {
                uni.navigateTo({url: "/plugins/bargain/activity/activity?id=" + v.bargain_order_id});
            },
            getIntegral: function (list) {
                const self = this;
                clearInterval(self.integral);
                let func = function () {
                    list.forEach((value, key, array) => {
                        value.priceList = self.handlePrice(value.now_price == value.min_price ? value.min_price : value.reset_price);
                        if (value.status) return;
                        let time = value.finish_at.replace(/-/g, '/');
                        let diff_time = parseInt((new Date(time).getTime() - new Date().getTime()) / 1000)
                        let day = 0, hour = 0, minute = 0, second = 0;
                        if (diff_time > 0) {
                            hour = Math.floor(diff_time / (60 * 60)) - (day * 24);
                            minute = Math.floor(diff_time / 60) - (day * 24 * 60) - (hour * 60);
                            second = Math.floor(diff_time) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                            hour = hour < 10 ? '0' + hour : hour;
                            minute = minute < 10 ? '0' + minute : minute;
                            second = second < 10 ? '0' + second : second;
                            value.times = {day, hour, minute, second};
                        } else {
                            value.times = second;
                        }
                    });
                    self.list = list;
                }
                func(list);
                self.integral = setInterval(() => {
                    func(list);
                }, 1000);
            },

            submit: function (bargain) {
                const mchList = [{
                    "mch_id": 0,
                    "bargain_order_id": bargain.bargain_order_id,
                    "goods_list": [{
                        "id": bargain.goods_id,
                        "attr": [],
                        "num": 1,
                        "cart_id": 0,
                        "goods_attr_id": bargain.goods_attr_id
                    }]
                }];

                uni.navigateTo({
                    url: '/pages/order-submit/order-submit?mch_list=' +
                        JSON.stringify(mchList) +
                        '&preview_url=' + encodeURIComponent(this.$api.bargain.order_preview) +
                        '&submit_url=' + encodeURIComponent(this.$api.bargain.order_submit)
                });
            },
        }

    }
</script>
<style scoped lang="scss">
    .no-content {
        padding: #{150rpx} 0;
        text-align: center;
        color: #888;
    }

    .order-list {

    }

    .bargain-list {
        margin: 20rpx 24rpx 0;
        border-radius: 16rpx;
        background: #ffffff;
        height: #{256rpx};
        &.long {
            height: #{298rpx};
        }
        image {
            height: 100%;
            width: #{256rpx};
            display: block;
            border-top-left-radius: 16rpx;
            border-bottom-left-radius: 16rpx;
        }

        .bargain-right {
            margin: 16rpx #{20rpx};
            min-height: #{216rpx};
        }

        .bargain-time {
            margin: #{8rpx} 0;
            font-size: #{24rpx};
            color: #999999;
            >view:first-of-type {
                margin-right: #{4rpx};
            }
            .info {
                margin: 0 #{2rpx};
                padding: 0 #{5rpx};
                height: #{36rpx};
                background: #F3F3F3;
                border-radius: #{4rpx};
                line-height: #{36rpx};
            }
        }

        .self {
        }

        .min-price {
            color: #999999;
            font-size: #{24rpx};
        }

        .price {
            color: #ff4544;
            font-size: #{28rpx};
            .price-int {
                font-size: 40rpx;
            }
        }

        .bargain-content {
            color: #666666;
            font-size: #{24rpx};
        }

        .bargain-name {
            font-size: #{28rpx};
            color: #353535;
        }

        .attr {
            color: #999999;
            margin: #{12rpx 0 4rpx 0};
            font-size: $uni-font-size-weak-one;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }
    }
</style>